import React, { memo, useEffect } from 'react';
import type { FC, ReactNode } from 'react';
import { HomeWrapper } from './style';
import { byAppleMusic } from '@/assets/data';
import HomeListv1 from './c-cpns/home-listv1';
import { useAppDispatch, useAppSelector } from '@/store';
import { feachHomeMenuAction } from './store';
import HomeListv2 from './c-cpns/home-listv2';
import { shallowEqual } from 'react-redux';


interface IProps {
  children?: ReactNode;
}

const Home: FC<IProps> = () => {
  const dispatch = useAppDispatch()

  useEffect(() => {
    dispatch(feachHomeMenuAction())
  }, [dispatch])

  const { recomdSongMenus, artists, albums, toplist } = useAppSelector((state) => ({
    recomdSongMenus: state.home.recomdSongMenus,
    artists: state.home.artists,
    albums: state.home.albums,
    toplist: state.home.toplist
  }), shallowEqual)
  return (
    <HomeWrapper>
      {byAppleMusic && <HomeListv1 title="by Apple Music" listDate={byAppleMusic} navigatePath='/playlist' />}
      {recomdSongMenus && <HomeListv1 title="推荐歌单" listDate={recomdSongMenus} morepath='/discover/推荐歌单' navigatePath='/playlist' />}
      <HomeListv2 title='Foy You' />
      {artists && <HomeListv1 title="歌手推荐" listDate={artists} width='16.666%' isround={1} urlwidth={440} navigatePath='/artist' />}
      {albums && <HomeListv1 title="新专速递" listDate={albums.slice(0, 10)} morepath='/more/新专速递' navigatePath='/album' />}
      {toplist && <HomeListv1 title="排行榜" listDate={toplist} morepath='/discover/排行榜' navigatePath='/playlist' />}
    </HomeWrapper>
  );
};
export default memo(Home);
